.container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 81px 144px 195px 25px auto 40px 50px;
    /*background-color: red;*/
    margin: 0 auto;
    background-color:white;
    overflow: auto;
    position: absolute;
    z-index: -2;
    /*visibility: hidden;*/
    /*border:1px solid red;*/
}
.c2
{
    overflow: hidden
}
.guohao
{
    background-color:#eeeeee;
    text-align:center;
    line-height: 40px;
    font-size:14px;
    color:#3399ff;
}
.dilan  /*最底部*/
{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    position: fixed;
    background-color:white;
    bottom:0;
    height:50px;
    width:100%;
    padding-top:9px;
}
.dilan div
{
    display:flex;
    align-items: flex-end;
    justify-content: center;
    padding:20px;
    color:#657180;
}
.jian
{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    border-bottom:1px solid #e3e4e5;
    /*padding:3px 0;*/
    /*background-color:blue;*/
}
.jian div
{
    display:flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom:8px;
    color:#495060;
}
.nav
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    position: fixed;
    top:0;
    background-color: white;
    z-index: 99999999;
}
.img
{
    width:38px;
    height:38px;
    background-color:red;
    margin-left:5px;
}
.icon-caidan
{
    width:38px;
    height:38px;
    /*background-color:red;*/
    text-align: center;
    line-height: 38px;
    color:#99cc00;
    margin-right:5px;
    display:flex;
    justify-content: right;
    font-size: 20px;
}
h1
{
    font-size:18px;
    font-weight: normal;
}
.lunbo img
{
    width:100%;
    height:auto;
    overflow: hidden;
}
.yanyukanfu
{
    display:grid;
    grid-template-rows: 30px auto;
}
.yanyu
{
    padding:5px;
    display: flex;
    align-items: center;
    /*background-color: blue;*/
}
.circle
{
    border:1px solid #99cc00;
    width:10px;
    height:10px;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
}
.xunlian
{
    display:grid;
    grid-template-columns: repeat(3,1fr);
}
.xunlian div
{
    display:flex;
    align-items: flex-end;
    padding-bottom:8px;
    justify-content: center;
    /*background-color:red;*/
    border-bottom: 1px solid #e3e4e5;
}
.kechen
{
    display:grid;
    grid-template-rows:35px auto;
}
.kechen2
{
    --duoge:0;
    display: grid;
    grid-template-columns: repeat(var(--duoge),1fr);
    border-bottom: 1px solid #e3e4e5;
    padding:8px 0;
    width:100%;
    /*background-color:red;*/
    overflow:auto;
}
.kechen2 div
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.ABkechen
{
    /*background-image: url("http://m.ostcn.com/static/img/course-ab.786ed16.png");*/
    background-size: cover;
    color:#99cc00
}
.xinwen
{
    display: flex;
    align-items: center;
}
img
{
    width:100%;
}
.circle-1
{
    width:100%;
    height:100%;
    font-size: calc(30px * var(--font)/350);
    color:#495060;
}
.circle-2
{
    width:100%;
    height:100%;
    font-size: calc(30px * var(--font)/350);
    color:#495060;
}
.circle-3
{
    width:60px;
    height:60px;
    background-color:#99cc00;
    border-radius: 50%;
    position: absolute;
    top:10px;
    color:white;
    font-size: calc(30px * var(--font)/350);
    text-align: center;
    line-height: 40px;
    left:50%;
    transform: translateX(-50%);
}
.circle-5
{
    width:30px;
    height:30px;
    /*background-color:#99cc00;*/
    border-radius: 50%;
    position: absolute;
    /*top:10px;*/
    color:white;
    font-size: calc(20px * var(--font)/350);
    text-align: center;
    /*line-height: 40px;*/
    transform: scaleX(-1);
}
.circle-4
{
    font-size: calc(30px * var(--font)/350);
}
.xunlian :nth-of-type(2) .circle-3
{
    background-color: #ff9900;
}
.xunlian :nth-of-type(3) .circle-3
{
    background-color: #3399ff;
}
.border-bottom
{
    border-bottom:1px solid #eeeeee;
    padding:5px;
    display:flex;
    justify-content: space-between;
}
.span--1{
    display:inline-block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:3px;
    white-space: nowrap;
    color:#666b70;
}
.yuyankepu
{
    /*display:none;*/
    background-color: white;
    position: absolute;
    top:0;
    width: 100%;
    visibility: hidden;
}
.span--2
{
    display:inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:3px;
    white-space: nowrap;
    color:#999999;
}
.white-1
{
    width:100%;
    background-color:white;
    height:auto;
    position: fixed;
    top:38px;
    z-index: -1;
    display:none;
    padding:10px;
    border:2px solid #eeeeee;
}
section
{
    width:100%;
    height:calc(100% - 48px);
    background-color:rgb(0,0,0);
    position: absolute;
    z-index: -3;
    top:45px;
}
.opc
{
    opacity: 0.8;
}
.kai
{
    display:block;
}
.p-margin
{
    display:inline-block;
    margin-right:10px;
    color:#3399ff;
    margin-top:5px;
}
.swiper {
    width: 100%;
    height: 200px;
    margin-top:45px;
    overflow:hidden;
}
img
{
    width:100%;
    height:100%;
}
ul
{
    list-style: none;
    padding:8px;
    margin:0;
}
h3
{
    font-weight: normal;
}
li
{
    margin-bottom:15px;
}
video
{
    width:100%;
    height:auto;
}
a
{
    display:block;
}